<script setup lang="ts">
import { ref, computed } from 'vue'
const currentRate = ref(0)
const activeNames = ref([0])
const collapse = ref([
  { id: 1, title: '第一阶段:前端开发基础', content: 'HTML+CSS' },
  { id: 2, title: '第二阶段:前端开发基本功', content: 'javascript+jQuery' },
  { id: 3, title: '第三阶段:前后端交互', content: 'Ajax+跨域' },
  { id: 4, title: '第四阶段:后端开发', content: 'node+express' },
  { id: 5, title: '第五阶段:前端框架', content: 'vue+webpack' }
])
const text = computed(() => currentRate.value.toFixed(0) + '%')
</script>

<template>
  <div class="study-page">
    <van-nav-bar title="学习进度" :border="false" />
    <div class="circle">
      <van-circle
        v-model:current-rate="currentRate"
        :rate="30"
        :speed="100"
        :text="text"
        layer-color="#eee"
      />
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="item in collapse"
        :key="item.id"
        :title="item.title"
        :name="item.id"
        icon="hot-o"
      >
        {{ item.content }}
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<style lang="scss" scoped>
.circle {
  margin: 10px 0;
  padding: 10px 0;
  height: 100px;
  background-color: var(--bxg-bg2);
  position: relative;

  .van-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
